<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            overflow: hidden;
        }
        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: #fff;
            padding: 20px;
            box-sizing: border-box;
        }
        .main-content {
            flex: 1;
            padding: 20px;
            box-sizing: border-box;
        }
        .question-nav {
            margin-bottom: 30px;
        }
        .nav-section {
            margin-bottom: 20px;
        }
        .nav-title {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 16px;
            border-bottom: 1px solid #34495e;
            padding-bottom: 5px;
        }
        .question-numbers {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .question-number {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #34495e;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
        }
        .question-number:hover {
            background-color: #1abc9c;
        }
        .question-number.answered {
            background-color: #3498db;
        }
        .question-number.current {
            background-color: #e74c3c;
        }
        .submit-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.3s;
        }
        .submit-btn:hover {
            background-color: #c0392b;
        }
        .question-container {
            min-height: 400px;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
        }
        .question-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        .question-content {
            margin-bottom: 20px;
            line-height: 1.6;
        }
        .options {
            margin-left: 20px;
        }
        .option {
            margin-bottom: 10px;
        }
        .code-editor {
            width: 100%;
            height: 200px;
            border: 1px solid #ddd;
            font-family: 'Courier New', monospace;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 10px;
        }
        .navigation-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .nav-btn {
            padding: 8px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .nav-btn:hover {
            background-color: #2980b9;
        }
        .nav-btn:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        .timer {
            text-align: right;
            font-size: 18px;
            margin-bottom: 20px;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <div class="timer" id="timer">剩余时间: 120:00</div>
            
            <div class="question-nav">
                <div class="nav-section">
                    <div class="nav-title">单选题 (10题)</div>
                    <div class="question-numbers" id="single-choice-numbers">
                        <!-- 动态生成单选题编号 -->
                    </div>
                </div>
                
                <div class="nav-section">
                    <div class="nav-title">多选题 (10题)</div>
                    <div class="question-numbers" id="multi-choice-numbers">
                        <!-- 动态生成多选题编号 -->
                    </div>
                </div>
                
                <div class="nav-section">
                    <div class="nav-title">判断题 (10题)</div>
                    <div class="question-numbers" id="judgment-numbers">
                        <!-- 动态生成判断题编号 -->
                    </div>
                </div>
                
                <div class="nav-section">
                    <div class="nav-title">编程题 (2题)</div>
                    <div class="question-numbers" id="programming-numbers">
                        <!-- 动态生成编程题编号 -->
                    </div>
                </div>
            </div>
            
            <button class="submit-btn" id="submit-btn">提交试卷</button>
        </div>
        
        <div class="main-content">
            <div class="question-container" id="question-container">
                <!-- 题目内容将在这里动态加载 -->
            </div>
            
            <div class="navigation-buttons">
                <button class="nav-btn" id="prev-btn">上一题</button>
                <button class="nav-btn" id="next-btn">下一题</button>
            </div>
        </div>
    </div>

    <script>
        // 考试数据
        const examData = {
            singleChoice: Array(10).fill().map((_, i) => ({
                id: `sc-${i+1}`,
                type: 'single',
                question: `单选题 ${i+1}: 这是第 ${i+1} 道单选题的题目内容。`,
                options: ['选项A', '选项B', '选项C', '选项D'],
                answer: null
            })),
            multiChoice: Array(10).fill().map((_, i) => ({
                id: `mc-${i+1}`,
                type: 'multi',
                question: `多选题 ${i+1}: 这是第 ${i+1} 道多选题的题目内容。`,
                options: ['选项A', '选项B', '选项C', '选项D', '选项E'],
                answer: []
            })),
            judgment: Array(10).fill().map((_, i) => ({
                id: `jd-${i+1}`,
                type: 'judgment',
                question: `判断题 ${i+1}: 这是第 ${i+1} 道判断题的题目内容。`,
                answer: null
            })),
            programming: Array(2).fill().map((_, i) => ({
                id: `pg-${i+1}`,
                type: 'programming',
                question: `编程题 ${i+1}: 这是第 ${i+1} 道编程题的题目要求。`,
                description: `请编写一个函数实现以下功能...`,
                answer: ''
            }))
        };

        // 当前题目索引
        let currentQuestion = {
            type: 'single',
            index: 0
        };

        // 用户答案
        const userAnswers = {
            singleChoice: Array(10).fill(null),
            multiChoice: Array(10).fill([]),
            judgment: Array(10).fill(null),
            programming: Array(2).fill('')
        };

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 生成题目编号
            generateQuestionNumbers();
            
            // 加载当前题目
            loadQuestion();
            
            // 绑定事件
            document.getElementById('prev-btn').addEventListener('click', goToPrevQuestion);
            document.getElementById('next-btn').addEventListener('click', goToNextQuestion);
            document.getElementById('submit-btn').addEventListener('click', submitExam);
            
            // 开始计时器
            startTimer(120 * 60); // 120分钟
        });

        // 生成题目编号
        function generateQuestionNumbers() {
            const singleChoiceNumbers = document.getElementById('single-choice-numbers');
            const multiChoiceNumbers = document.getElementById('multi-choice-numbers');
            const judgmentNumbers = document.getElementById('judgment-numbers');
            const programmingNumbers = document.getElementById('programming-numbers');
            
            // 单选题编号 (分两行，每行5个)
            for (let i = 0; i < 10; i++) {
                const num = document.createElement('div');
                num.className = 'question-number';
                num.textContent = i + 1;
                num.dataset.type = 'single';
                num.dataset.index = i;
                num.addEventListener('click', () => navigateToQuestion('single', i));
                singleChoiceNumbers.appendChild(num);
            }
            
            // 多选题编号
            for (let i = 0; i < 10; i++) {
                const num = document.createElement('div');
                num.className = 'question-number';
                num.textContent = i + 1;
                num.dataset.type = 'multi';
                num.dataset.index = i;
                num.addEventListener('click', () => navigateToQuestion('multi', i));
                multiChoiceNumbers.appendChild(num);
            }
            
            // 判断题编号
            for (let i = 0; i < 10; i++) {
                const num = document.createElement('div');
                num.className = 'question-number';
                num.textContent = i + 1;
                num.dataset.type = 'judgment';
                num.dataset.index = i;
                num.addEventListener('click', () => navigateToQuestion('judgment', i));
                judgmentNumbers.appendChild(num);
            }
            
            // 编程题编号
            for (let i = 0; i < 2; i++) {
                const num = document.createElement('div');
                num.className = 'question-number';
                num.textContent = i + 1;
                num.dataset.type = 'programming';
                num.dataset.index = i;
                num.addEventListener('click', () => navigateToQuestion('programming', i));
                programmingNumbers.appendChild(num);
            }
        }

        // 加载题目
        function loadQuestion() {
            const container = document.getElementById('question-container');
            container.innerHTML = '';
            
            // 更新导航中的当前题目样式
            updateNavigationStyle();
            
            let question;
            if (currentQuestion.type === 'single') {
                question = examData.singleChoice[currentQuestion.index];
                
                const html = `
                    <div class="question-title">${question.question}</div>
                    <div class="question-content">请选择一个正确答案：</div>
                    <div class="options">
                        ${question.options.map((opt, i) => `
                            <div class="option">
                                <input type="radio" name="single-choice" id="opt-${i}" value="${i}" 
                                    ${userAnswers.singleChoice[currentQuestion.index] === i ? 'checked' : ''}>
                                <label for="opt-${i}">${opt}</label>
                            </div>
                        `).join('')}
                    </div>
                `;
                container.innerHTML = html;
                
                // 绑定单选事件
                container.querySelectorAll('input[type="radio"]').forEach(radio => {
                    radio.addEventListener('change', function() {
                        userAnswers.singleChoice[currentQuestion.index] = parseInt(this.value);
                        updateQuestionStatus(currentQuestion.type, currentQuestion.index);
                    });
                });
                
            } else if (currentQuestion.type === 'multi') {
                question = examData.multiChoice[currentQuestion.index];
                
                const html = `
                    <div class="question-title">${question.question}</div>
                    <div class="question-content">请选择所有正确答案：</div>
                    <div class="options">
                        ${question.options.map((opt, i) => `
                            <div class="option">
                                <input type="checkbox" name="multi-choice" id="opt-${i}" value="${i}" 
                                    ${userAnswers.multiChoice[currentQuestion.index].includes(i) ? 'checked' : ''}>
                                <label for="opt-${i}">${opt}</label>
                            </div>
                        `).join('')}
                    </div>
                `;
                container.innerHTML = html;
                
                // 绑定多选事件
                container.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                    checkbox.addEventListener('change', function() {
                        const index = parseInt(this.value);
                        let answers = [...userAnswers.multiChoice[currentQuestion.index]];
                        
                        if (this.checked) {
                            answers.push(index);
                        } else {
                            answers = answers.filter(a => a !== index);
                        }
                        
                        userAnswers.multiChoice[currentQuestion.index] = answers;
                        updateQuestionStatus(currentQuestion.type, currentQuestion.index);
                    });
                });
                
            } else if (currentQuestion.type === 'judgment') {
                question = examData.judgment[currentQuestion.index];
                
                const html = `
                    <div class="question-title">${question.question}</div>
                    <div class="question-content">请判断对错：</div>
                    <div class="options">
                        <div class="option">
                            <input type="radio" name="judgment" id="judge-true" value="true" 
                                ${userAnswers.judgment[currentQuestion.index] === true ? 'checked' : ''}>
                            <label for="judge-true">正确</label>
                        </div>
                        <div class="option">
                            <input type="radio" name="judgment" id="judge-false" value="false" 
                                ${userAnswers.judgment[currentQuestion.index] === false ? 'checked' : ''}>
                            <label for="judge-false">错误</label>
                        </div>
                    </div>
                `;
                container.innerHTML = html;
                
                // 绑定判断事件
                container.querySelectorAll('input[type="radio"]').forEach(radio => {
                    radio.addEventListener('change', function() {
                        userAnswers.judgment[currentQuestion.index] = this.value === 'true';
                        updateQuestionStatus(currentQuestion.type, currentQuestion.index);
                    });
                });
                
            } else if (currentQuestion.type === 'programming') {
                question = examData.programming[currentQuestion.index];
                
                const html = `
                    <div class="question-title">${question.question}</div>
                    <div class="question-content">${question.description}</div>
                    <textarea class="code-editor" id="code-editor">${userAnswers.programming[currentQuestion.index]}</textarea>
                `;
                container.innerHTML = html;
                
                // 绑定代码编辑事件
                const editor = document.getElementById('code-editor');
                editor.addEventListener('input', function() {
                    userAnswers.programming[currentQuestion.index] = this.value;
                    updateQuestionStatus(currentQuestion.type, currentQuestion.index);
                });
            }
            
            // 更新导航按钮状态
            updateNavButtons();
        }

        // 更新导航按钮状态
        function updateNavButtons() {
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            
            // 上一题按钮
            if (currentQuestion.type === 'single' && currentQuestion.index === 0) {
                prevBtn.disabled = true;
            } else if (currentQuestion.type === 'multi' && currentQuestion.index === 0) {
                prevBtn.disabled = true;
            } else if (currentQuestion.type === 'judgment' && currentQuestion.index === 0) {
                prevBtn.disabled = true;
            } else if (currentQuestion.type === 'programming' && currentQuestion.index === 0) {
                prevBtn.disabled = true;
            } else {
                prevBtn.disabled = false;
            }
            
            // 下一题按钮
            if (currentQuestion.type === 'single' && currentQuestion.index === 9) {
                nextBtn.disabled = true;
            } else if (currentQuestion.type === 'multi' && currentQuestion.index === 9) {
                nextBtn.disabled = true;
            } else if (currentQuestion.type === 'judgment' && currentQuestion.index === 9) {
                nextBtn.disabled = true;
            } else if (currentQuestion.type === 'programming' && currentQuestion.index === 1) {
                nextBtn.disabled = true;
            } else {
                nextBtn.disabled = false;
            }
        }

        // 更新导航中的当前题目样式
        function updateNavigationStyle() {
            // 清除所有当前题目样式
            document.querySelectorAll('.question-number').forEach(el => {
                el.classList.remove('current');
            });
            
            // 设置当前题目样式
            const currentNum = document.querySelector(`.question-number[data-type="${currentQuestion.type}"][data-index="${currentQuestion.index}"]`);
            if (currentNum) {
                currentNum.classList.add('current');
            }
        }

        // 更新题目状态（已答/未答）
        function updateQuestionStatus(type, index) {
            let answered = false;
            
            if (type === 'single') {
                answered = userAnswers.singleChoice[index] !== null;
            } else if (type === 'multi') {
                answered = userAnswers.multiChoice[index].length > 0;
            } else if (type === 'judgment') {
                answered = userAnswers.judgment[index] !== null;
            } else if (type === 'programming') {
                answered = userAnswers.programming[index].trim() !== '';
            }
            
            const questionNum = document.querySelector(`.question-number[data-type="${type}"][data-index="${index}"]`);
            if (answered) {
                questionNum.classList.add('answered');
            } else {
                questionNum.classList.remove('answered');
            }
        }

        // 导航到指定题目
        function navigateToQuestion(type, index) {
            currentQuestion.type = type;
            currentQuestion.index = index;
            loadQuestion();
        }

        // 上一题
        function goToPrevQuestion() {
            if (currentQuestion.index > 0) {
                currentQuestion.index--;
            } else {
                // 切换到上一类型的最后一题
                if (currentQuestion.type === 'multi') {
                    currentQuestion.type = 'single';
                    currentQuestion.index = 9;
                } else if (currentQuestion.type === 'judgment') {
                    currentQuestion.type = 'multi';
                    currentQuestion.index = 9;
                } else if (currentQuestion.type === 'programming') {
                    currentQuestion.type = 'judgment';
                    currentQuestion.index = 9;
                }
            }
            loadQuestion();
        }

        // 下一题
        function goToNextQuestion() {
            if (currentQuestion.type === 'single' && currentQuestion.index < 9) {
                currentQuestion.index++;
            } else if (currentQuestion.type === 'single' && currentQuestion.index === 9) {
                currentQuestion.type = 'multi';
                currentQuestion.index = 0;
            } else if (currentQuestion.type === 'multi' && currentQuestion.index < 9) {
                currentQuestion.index++;
            } else if (currentQuestion.type === 'multi' && currentQuestion.index === 9) {
                currentQuestion.type = 'judgment';
                currentQuestion.index = 0;
            } else if (currentQuestion.type === 'judgment' && currentQuestion.index < 9) {
                currentQuestion.index++;
            } else if (currentQuestion.type === 'judgment' && currentQuestion.index === 9) {
                currentQuestion.type = 'programming';
                currentQuestion.index = 0;
            } else if (currentQuestion.type === 'programming' && currentQuestion.index < 1) {
                currentQuestion.index++;
            }
            loadQuestion();
        }

        // 提交考试
        function submitExam() {
            if (confirm('确定要提交试卷吗？提交后无法修改！')) {
                // 这里可以添加提交逻辑，比如发送到服务器
                alert('试卷已提交！');
                console.log('用户答案:', userAnswers);
                
                // 禁用所有交互
                document.querySelectorAll('input, textarea, button').forEach(el => {
                    el.disabled = true;
                });
            }
        }

        // 计时器
        function startTimer(durationInSeconds) {
            let timer = durationInSeconds;
            const timerElement = document.getElementById('timer');
            
            const interval = setInterval(function() {
                const minutes = Math.floor(timer / 60);
                const seconds = timer % 60;
                
                timerElement.textContent = `剩余时间: ${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
                
                if (--timer < 0) {
                    clearInterval(interval);
                    timerElement.textContent = "时间到！";
                    submitExam();
                }
            }, 1000);
        }
    </script>
</body>
</html>
